import { Canvas3d } from "@/shared/3d/Canvas3d"
import { UiButton } from "@/shared/Uikit"
import { UiTextField } from "@/shared/Uikit/UiTextField"
import { IModel } from "@/shared/interfaces"
import { Loader, OrbitControls, useGLTF } from "@react-three/drei"
import { Select } from "@react-three/postprocessing"
import { ReactNode, Suspense, useEffect, useState } from "react"
import { Mesh } from "three"
import { useSetupModel } from "../model/useSetupModel"


type SetupModelProps = {
    modelFilePath: string,
    name: string
    onSuccess?: (response: IModel) => void
}

export default function SetupInteractiveModel(props: SetupModelProps) {
    const { scene } = useGLTF(`/api/${props.modelFilePath}`)
    const meshes = scene.children as Mesh[]
    const names = meshes.map(mesh => mesh.name)
    const { index, register, handleSubmit, isSuccess, response } = useSetupModel(names, props.name, props.modelFilePath)


    useEffect(() => {
        if (isSuccess && props.onSuccess && response) {
            props.onSuccess(response)
        }
    }, [isSuccess])

    const model = meshes.map((mesh: Mesh) => {
        return (
            <Select key={mesh.name} enabled={mesh.name == names[index]}>
                <mesh
                    name={mesh.name}
                    position={mesh.position}
                    geometry={mesh.geometry}
                    material={mesh.material}
                    castShadow
                    receiveShadow
                />
            </Select>
        )
    })


    return (
        <>
            <div className='h-full w-full absolute bg-gray-300'>
                <Canvas3d outlineColor={0xFF0000}>
                    <Suspense fallback={null}>
                        {model}
                    </Suspense>
                    <ambientLight />
                    <OrbitControls />
                </Canvas3d>
                <Loader />
            </div>
            <div className='absolute bottom-5  bg-white p-5 rounded-xl'>
                <form onSubmit={handleSubmit}>
                    <h1 className=' font-bold text-lg'>
                        Деталь №:{index + 1}
                    </h1>
                    <h1 className=' font-bold text-lg'>
                        Оригинальное название:{names[index]}
                    </h1>
                    <div className='flex justify-between'>
                        <label>Интерактивная деталь</label>
                        <input
                            type="checkbox"
                            {...register("interactive")}
                        />
                    </div>
                    <UiTextField
                        label="Название детали"
                        inputProps={
                            {
                                placeholder: "Фюзеляж...",
                                ...register("name", { required: true })
                            }
                        }
                    />
                    <UiTextField
                        label="Описание детали"
                        inputProps={
                            {
                                placeholder: "Часть самолета, которая...",
                                ...register("description", { required: true })
                            }
                        }
                    />
                    <UiButton variant="primary">
                        {index < names.length ? "Далее" : "Сохранить"}
                    </UiButton>
                </form>
            </div>
        </>
    )
}